<template>
  <div class="about">
    <button @click="fun">跳转One</button>
    <!-- this.$router 路由操作对象 里面存放的是操作路由的方法
    this.$route 路由的信息对象 里面存方的是路由的相关信息 -->

  <table border="1" cellpadding="10" cellspacing='0' style="margin:0 auto;">
    <tbody>
      <tr v-for="v in list" :key="v.id">
        <td>{{v.name}}</td>
        <td @click="getId(v.id)">查看详细</td>
      </tr>
    </tbody>

  </table>


  </div>
</template>
<script>
export default {
  data(){
    return{
      list:[
        {
          id:'001',
          name:'李四'
        },
        {
          id:'002',
          name:'王五'
        },
        {
          id:'003',
          name:'山本'
        },
        {
          id:'004',
          name:'周六'
        },
        {
          id:'005',
          name:'小屋'
        },
      ]

    }
  },
  methods:{
    // 路由传参 
    //1 query 可以用name跳转也能用 path 跳转 刷新页面不会丢失参数
    //2 params只能用name跳转 不会显示在地址栏上， 刷新页面会导致参数丢失 不稳定
    //3 在path跳转路径上拼接 拼接的值会存储在$route的 params对象上直接可以调用 这里必须在 index.js文件中进行接收值 否则会造成页面不渲染 也不报错 传值方式 this.$route.params.这里写你自己定义的路由上面的参数名
    getId(id){
      console.log(id);
      // this.$router.push({
      //   path:'/one',
      //   // 1
      //   query:{
      //     // id:id
      //       id
      //     //直接简写为id
      //   },
      //   // 2
      //   //使用params跳转需要用name跳转
      //   params:{
      //     name:'one',
      //     myid:id,
      //   },
      //   // 3
      // })
      this.$router.push({
        path:`/one/${id}/asasa`
      })
    },
    fun(){
      // this.$router.push('/one') //跳转
      // this.$router.replace('/one') //不会产生历史记录
      //上面两个都为跳转区别在于一个会产生历史记录一个不会产生
      //根据路由的路径跳转
      this.$router.push({
        name:'one',
      })
      //根据路由的名字跳转
    }
  }
}
</script>

<style>

</style>